<template>
  <!-- 底部 -->
  <div>
    <div :style="'height:' + offsetHeight + 'px'"></div>

    <div class="foot" ref="foots">
      <div class="u-flex u-row-between" :class="tabIndex == 0 ? 'indexWidth' : 'pageWidth'">
        <div>
          <div class="foot_tit">联系方式</div>
          <div class="u-flex">
            <div class="foot_item">电话: 18345081033</div>
            <div class="foot_item">地址：哈尔滨市南岗区一曼街80号5楼</div>
            <div class="foot_item">邮箱：fetcohrb@163.com</div>
          </div>
        </div>
        <div class="foot_btn hand u-flex-center" @click="jump('/')">立即入驻</div>
      </div>
    </div>
  </div>
</template>
<script setup>
  import { useStore } from 'vuex'
  import { ref, onMounted, watch, computed, getCurrentInstance, reactive } from 'vue'
  import { useRouter } from 'vue-router'

  const props = defineProps({
    // 当前索引
    tabIndex: {
      type: Number,
      default: 0,
    },
  })

  const router = useRouter()
  const appContext = getCurrentInstance().appContext
  const imgUrl = appContext.config.globalProperties.$imgUrl
  const store = useStore()

  const offsetHeight = ref(0)
  const foots = ref(null)

  onMounted(() => {
    offsetHeight.value = foots.value.offsetHeight
  })

  const jump = path => {
    router.push(path)
  }
</script>

<style scoped lang="less">
  @media screen and (max-width: 1920px) {
    .foot {
      .foot_tit {
        font-size: 20px !important;
        margin-bottom: 12px !important;
      }

      .foot_item {
        font-size: 12px !important;
        margin-right: 50px !important;
      }

      .foot_btn {
        width: 140px !important;
        font-size: 14px !important;
      }
    }
  }

  @media screen and (max-width: 1700px) {
    .foot {
      aspect-ratio: 20/0.9 !important;
      .foot_tit {
        font-size: 18px !important;
        margin-bottom: 10px !important;
      }

      .foot_btn {
        width: 120px !important;
        font-size: 13px !important;
      }
    }
  }

  // 兼容136
  @media screen and (max-width: 1500px) {
    .foot {
      aspect-ratio: 20/1 !important;
      .foot_tit {
        font-size: 16px !important;
        margin-bottom: 11px !important;
      }

      .foot_item {
        font-size: 11px !important;
        margin-right: 40px !important;
      }

      .foot_btn {
        width: 110px !important;
        font-size: 12px !important;
      }
    }
  }
  .foot {
    position: absolute;
    bottom: 0;
    width: 100%;
    aspect-ratio: 20/0.8;
    background: url('../../image/navbar/tabbar-bg.png') no-repeat;
    background-size: 100% 100%;
    color: #fff;

    .foot_tit {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 15px;
    }

    .foot_item {
      font-size: 14px;
      margin-right: 60px;
    }

    .foot_btn {
      width: 173px;
      aspect-ratio: 16/4.3;
      background: #fff;
      color: #5463ff;
      font-size: 16px;
      border-radius: 22px;
    }
  }

  .pageWidth,
  .indexWidth {
    height: 100%;
  }
</style>
